<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security" %>
<%@ page session="false" %>
<html>
<head>
	<link rel="stylesheet" href="<c:url value="/resources/css/bootstrap.css" />" >
	<link rel="stylesheet" href="<c:url value="/resources/css/bootstrap-theme.css" />" >
	<script type="text/javascript" src="<c:url value="/resources/js/jquery-2.1.1.js" /> "></script>
	<script type="text/javascript" src="<c:url value="/resources/js/bootstrap.js" /> "></script>
	<title>List User Page</title>
	<script type="text/javascript">
		$(document).ready(function(){
			$(".deleteToModal").click(function (e){
				e.preventDefault();
				$("#deleteModal .deleteOfModal").attr("href", $(this).attr("href"));
				$("#deleteModal").modal();
			});
		});

	</script>
</head>
<body>
	<div class="container">
      <!-- Static navbar -->
      <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="<spring:url value="/" />">Spring MVC</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="<spring:url value="/" />">Home</a></li>
              <security:authorize access="! isAuthenticated()">
              <li><a href="<spring:url value="/login" />">Login</a></li>
              </security:authorize>
              <security:authorize access="isAuthenticated()">
              <li class="active"><a href="<spring:url value="/listuser" />">List Users</a></li>
              </security:authorize>
              <li><a href="<spring:url value="/register" />">Register</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <security:authorize access=" isAuthenticated()" >
              <li><a>Welcome ${pageContext.request.userPrincipal.name}</a></li>
              </security:authorize>
              <security:authorize access=" isAuthenticated()">
               <li><a href="<spring:url value="/logout" />">Logout</a></li>
              </security:authorize>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>
    </div> <!-- /container -->
    
    <div class="container">
    	<security:authorize access="hasRole('ROLE_ADMIN')">
    	<div class="bs-callout bs-callout-danger">
			  <h4>List User</h4>
			  You can add, edit, delete normal user
		</div>
		  
		<div style="padding-bottom: 3%">
		  	<button class="btn btn-primary btn-lg" onclick="window.location='<spring:url value="/register" />'"><span class="glyphicon glyphicon-plus-sign"></span> Create New User</button>
		</div>
		</security:authorize>
		<security:authorize access="hasRole('ROLE_USER')">
		<div class="bs-callout bs-callout-danger">
			  <h4>List User</h4>
			  You can see other user.
		</div>
		</security:authorize>
		 
    	<table class="table table-striped table-bordered table-hover">
		 	<tr>
		 		<th>Username</th>
		 		<security:authorize access="hasRole('ROLE_ADMIN')"><th style="width: 10px;">Password</th></security:authorize>
		 		<th>ID Card</th>
		 		<th>First Name</th>
		 		<th>Last Name</th>
		 		<th>Phone</th>
		 		<th>Email</th>
		 		<security:authorize access="hasRole('ROLE_ADMIN')"><th>Delete</th></security:authorize>
		 	</tr>
		 	<tr>
		 		<c:forEach items="${listUser}" var="user">
		 			<tr>
		 				<td>${user.username}</td>
		 				<security:authorize access="hasRole('ROLE_ADMIN')"><td style="width: 10px;">${user.password.substring(1,5)}</td></security:authorize>
		 				<td>${user.idcard}</td>
		 				<td>${user.firstname}</td>
		 				<td>${user.lastname}</td>
		 				<td>${user.phone}</td>
		 				<td>${user.email}</td>
		 				<security:authorize access="hasRole('ROLE_ADMIN')"><td><a href="<spring:url value="/delete/${user.username}" />" class="btn btn-danger deleteToModal"><span class="glyphicon glyphicon-trash"></span> Delete</a></td></security:authorize>
		 			</tr>
		 		</c:forEach>
		 	</tr>
		</table>
    </div>
    
    <div class="container">
    	<div class="navbar navbar-default navbar-fixed-bottom">
    		<div class="container">
    			<p class="navbar-text">&copy; Hai Nguyen|Java Fresher</p>
    			<a href="#" class="navbar-btn btn btn-danger pull-right"><span class="glyphicon glyphicon-chevron-up"></span>Back To Top</a>
    		</div>
    	</div>
    </div>
    
    <!-- Modal -->
	<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">Delete User</h4>
	      </div>
	      <div class="modal-body">
	        Are you sure ? 
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <a href="" type="button" class="btn btn-primary deleteOfModal">Delete</a>
	      </div>
	    </div>
	  </div>
	</div>
</body>
</html>
